<template>
	<view class="content">
		<view class='topblock' :style="{backgroundImage:'url('+imgurl+'indexbackground.png'+')'}">
			<pagehead :title="title" :isback='isback' :titlecolor='titlecolor'></pagehead>
			<view class='itemlist'>
				<view class='item' v-for='(item,index) in itemlist' :class="{'active':current==index}"
					@click="itemchange(index)" :key="'itemlist'+index">{{item}}</view>
			</view>
			<view class="bannerlist">
				<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration" :previous-margin='previous' :next-margin='next' :circular='circular'
					@change='bannerchange' :current='current'>
					<swiper-item>
						<swiperitem1></swiperitem1>
					</swiper-item>
					<swiper-item>
						<swiperitem1></swiperitem1>
					</swiper-item>
					<swiper-item>
						<swiperitem2></swiperitem2>
					</swiper-item>
					<swiper-item>
						<swiperitem2></swiperitem2>
					</swiper-item>
				</swiper>
			</view>
			<view class='notice'>
				<image class='icon' :src="imgurl+'notice.png'" mode='widthFix'></image>
				<text class='noticecontent'>回收废物,收获资源,保护环境有...</text>
				<text class='time'>2022-02-08</text>
			</view>
			<view class='iconlist'>
				<iconbox v-for='(item,index) in iconlist' :key="'iconlist'+index" :title='item.title'
					:iconsrc='item.iconsrc'></iconbox>
			</view>
			<view class='topblockbottom'>
				<image :src="imgurl+'logo.png'" mode='widthFix'></image>
			</view>
		</view>
		<view class='equipment'>
			<view class='title'>设备概览</view>
			<view class='equipmentinfo'>
				<view class="box">
					<circle-progress-bar :pro="0.123" :start="0" :size="size" unit="px" :border_width="borderwidth"
						:animate="true" :border_color="'#946CFF'">
						<view style="font-size:46rpx;color:#946CFF">
							{{(0.2213 * 100).toString()}}
						</view>
					</circle-progress-bar>
					<view class='tip'>
						今日投递总公斤数
					</view>
				</view>
				<view class="box">
					<circle-progress-bar :pro="0.123" :start="0" :size="size" unit="px" :border_width="borderwidth"
						:animate="true" :border_color="'#22CED4'">
						<view style="font-size:46rpx;color:#22CED4">
							{{(0.2213 * 100).toString()}}
						</view>
					</circle-progress-bar>
					<view class='tip'>
						今日投递总公斤数
					</view>
				</view>
				<view class="box">
					<circle-progress-bar :pro="0.123" :start="0" :size="size" unit="px" :border_width="borderwidth"
						:animate="true" :border_color="'#FF3A79'">
						<view style="font-size:46rpx;color:#FF3A79">
							{{(0.2213 * 100).toString()}}
						</view>
					</circle-progress-bar>
					<view class='tip'>
						今日投递总公斤数
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgurl:getApp().globalData.imgurl,
				// 页面标题
				title: '人创环保',
				isback: false,
				titlecolor: "white",
				// banner分类切换
				itemlist: ['今日入账', '今日支出', '今日纸箱价格', '今日瓶子价格'],
				// 轮播相关配置
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				previous: '46rpx',
				next: "46rpx",
				circular: true,
				current: 0,
				pro:0.123,
				// 常规操作
				iconlist: [{
						title: '对账单',
						iconsrc:getApp().globalData.imgurl+ 'indexicon1.png',
						textcolor: '#fff'
					},
					{
						title: '投递明细',
						iconsrc: getApp().globalData.imgurl+ 'indexicon2.png' ,
						textcolor: '#fff'
					},
					{
						title: '设备管理',
						iconsrc: getApp().globalData.imgurl+ 'indexicon3.png',
						textcolor: '#fff'
					},
				],
				size: uni.upx2px(160),
				borderwidth: uni.upx2px(10)
			}
		},
		onLoad() {


		},

		methods: {
			bannerchange(event) {
				this.current = event.detail.current
			},
			itemchange(value) {
				this.current = value
			}
		}
	}
</script>

<style lang='less' scoped>
	.content {
		.topblock {
			background-size: 100% 100%;
			width: 100vw;
			height: 1178rpx;
			position: relative;

			.itemlist {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0rpx 32rpx;

				.item {
					color: #F2F2F2;
					font-size: 22rpx;
					line-height: 46rpx;
				}

				.active {
					font-size: 34rpx;
					color: #fff;
				}
			}

			.bannerlist {
				margin-top: 40rpx;
			}

			.notice {
				width: 685rpx;
				height: 86rpx;
				box-sizing: border-box;
				padding: 28rpx 30rpx;
				background-color: rgba(255, 255, 255, 0.3);
				border-radius: 30rpx;
				margin: 0px auto;
				margin-top: 40rpx;
				color: #fff;
				line-height: 30rpx;
				display: flex;
				justify-content: space-between;

				.icon {
					width: 36rpx;
					display: block;
				}

				.noticecontent {
					display: block;
					margin-left: 23rpx;
					font-size: 26rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.time {
					display: block;
					font-size: 30rpx;
					font-weight: bold;
					width: 30%;
					margin-left: 42rpx;
					text-align: right;
				}
			}

			.iconlist {
				width: 650rpx;
				margin: 0px auto;
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;
			}

			.topblockbottom {
				width: 170rpx;
				height: 70rpx;
				background-color: #2F70F1;
				border-radius: 35rpx;
				padding: 11rpx 0rpx;
				box-sizing: border-box;
				position: absolute;
				bottom: -24rpx;
				left: 50%;
				transform: translateX(-50%);

				image {
					display: block;
					width: 42rpx;
					margin: 0px auto;
				}
			}
		}

		.equipment {
			margin-top: 34rpx;

			.title {
				color: #474747;
				font-size: 36rpx;
				padding-left: 32rpx;
				font-weight: bold;
			}

			.equipmentinfo {
				width: 686rpx;
				height: 300rpx;
				border-radius: 30rpx;
				box-shadow: 0px 0px 4rpx rgba(0, 0, 0, .3);
				margin: 0px auto;
				margin-top: 40rpx;
				margin-bottom: 52rpx;
				display: flex;
				justify-content: space-between;

				.box {
					width: 30%;
					padding-top: 40rpx;
				}

				.tip {
					font-size: 22rpx;
					color: #484848;
					text-align: center;
					white-space: nowrap;
					margin-top: 39rpx;
				}
			}

		}
	}

	::v-deep .swiper {
		height: 365rpx;
	}

	::v-deep .circle-progress-bar {
		margin: 0px auto;
	}
</style>
